<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>订单工序</title>
    <meta name="description" content="A simple process flow or SCADA diagram editor, simulating equipment monitoring and control." />
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script>
    <script src="./assets/js/go.js"></script>
</head>
<body >

<div class="buttonGroup loading" hidden>
    <button class="v-btn lock" data-index="lock">
        <svg version="1.1" width="35" height="35"   xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><desc>lock</desc><defs></defs><g>
            <g transform="matrix(0.60144232,0,0,0.51599595,1.7120429,0.5915785)">
                <path fill="#fff" d="m 74.243261,65.070058 -8.771,0 0,-15.417951 c 0,-9.437 -5.68,-15.116 -15.117,-15.116 -9.438,0 -15.114,5.679 -15.114,15.116 l 0,24.451 -8.771,0 0,-24.451 c 0,-13.171 10.716,-23.885 23.886,-23.885 13.172,0 23.89,10.714 23.89,23.885 -0.0037,8.148799 0.0066,7.275332 -0.003,15.417951 z" transform="matrix(1,0,0,1,0,0)"></path>
            </g>
                <rect fill="#fff" stroke-width="5" stroke-linecap="round" width="32" height="23" x="16" y="32.5"></rect>
            </g>
        </svg>
    </button>
    <button class="v-btn success" data-index="save">保存</button>
    <button class="v-btn info" data-index="big"><img src="assets/img/zoomin.png" /></button>
    <button class="v-btn info" data-index="small"><img src="assets/img/zoomout.png" /></button>
    <select id="theme">
        <option value="default">default</option>
        <option value="temp1">temp1</option>
    </select>
</div>

<div id="tips" class="loading" hidden>
    <div class="content">注释 : 灰色区域为无序工序组,工序不确定,但为流转串行。</div>
</div>

<div id="sample">
    <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:100%;"></div>
</div>

<script src="./assets/js/require.js" charset="utf-8"></script>
<script>
    require.config({
        baseUrl:"./assets/",
        urlArgs:function(url,moduleName){
            return Math.random(); // "1.0.9"; //
        },
        shim: {
            "js/team_order": {
                deps:["js/view"]
            }
        },
        map: {
            '*': {
                '$css': 'js/require.css'
            }
        }
    });

    require([
        "js/view",
        "js/team_order",
        "js/dialog",
        "$css!css/index"
    ],function(){
        $(".loading").removeAttr("hidden");
        $("body").on('click','[data-index]',function(e){
            var target = e.currentTarget;
            var type = target.getAttribute("data-index");
            if(!type){
                type = target.parentElement.getAttribute("data-index");
            }
            switch (type){
                case "big":{
                    myDiagram.scale += 0.1;
                }
                    break;
                case "small":{
                    if(myDiagram.scale>0.15){
                        myDiagram.scale -= 0.1;
                    }
                }
                    break;
                case "save":{
                    $.API.save();
                }
                    break;
                case "lock":{
                    var noLock = target.classList.contains("active");
                    if(noLock){
                        target.classList.remove("active");
                        target.querySelector("path").setAttribute("transform","matrix(1,0,0,1,0,0)");
                        myDiagram.isReadOnly = true;
                    }else{
                        target.classList.add("active");
                        target.querySelector("path").setAttribute("transform","matrix(1,0,0,1,0,-11)");
                        myDiagram.isReadOnly = false;
                    }
                }
                    break;
                default:
                    break;
            }
            //
            Dialog.hideTips();
        })

        $("#theme").on("change",'',function(){
            $.API.theme(this.value);
        })

        $(function(){
            $.API.init();
            $.API.load();
        })
    })
</script>
</body>
</html>
